<template>
    <h1>学生信息</h1>
    <ul>
        <li v-for="item in students" >
            <!-- <router-link :to="'/details/'+item.id">{{ item.name }}</router-link> -->
            <!-- <router-link :to="{name:'detail',params:{id:item.id}}">{{ item.name }}</router-link> -->
            <!-- <router-link :to="{path:'/details/'+item.id}">{{ item.name }}</router-link> -->
            <router-link :to="{path:'/details',query:{id:item.id}}">{{ item.name }}</router-link>
        </li>
    </ul>
    <el-button @click="handleDetail">跳转</el-button>
    <el-button @click="replace">替换</el-button>
</template>
<script setup>
import {ref} from 'vue';
import { useRouter } from 'vue-router';
const router=useRouter();
const students=ref([
    {id:1,name:'zhangsan',age:20},
    {id:2,name:'lisi',age:30},
])
const handleDetail=()=>{
    // router.push("/details")
    // router.push({path:'/details'})
    router.push({path:'/details',query:{id:1}})
    // router.push({name:'detail',params:{id:1}})
    // router.push({path:'/details/1'})
}
const replace=()=>{
    // router.replace('/login')
    router.go(1)
}
</script>
<style >
    
</style>